<template>
    <div class="cost-page">
        <div class="video-page" v-if="systemShow">
            <Row type="flex" justify="center" align="middle" class="video-page-row">
                <Col class="video-top">
                    <video :src="video" controls="controls" class="video" autoplay="autoplay"></video>
                </Col>
                <Col>
                    <Button type="primary" @click="inSystem">进入系统</Button>
                </Col>
            </Row>
        </div>
        <div class="content" v-if="!systemShow">
            <div class="content-top">
                <RadioGroup v-model="animal">
                    <Radio label="业务员"></Radio>
                    <Radio label="产品经理" disabled></Radio>
                    <Radio label="公司决策者" disabled></Radio>
                </RadioGroup>
            </div>
            <div class="content-form">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="200">
                    <FormItem label="产品采购价格" prop="name">
                        <Input v-model="formValidate.name" placeholder="产品采购价格"></Input>
                    </FormItem>
                    <FormItem>
                        请根据成本分析模块，将下列7个参数中的两个作为定价影响因素：（可以输入小数点后两位的正负整数）
                    </FormItem>
                    <FormItem label="将货品种类作为定价参数">
                        <Row>
                            <Col span="2">
                                <Checkbox v-model="disableList[1]"></Checkbox>
                            </Col>
                            <Col span="10">
                                <FormItem prop="huopin">
                                    <Input v-model="formValidate.huopin" placeholder=""
                                           :disabled="!disableList[1]"></Input>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">理由：</Col>
                            <Col span="10">
                                <FormItem>
                                    <Input v-model="formValidate.huopinRemark" placeholder="理由内容"
                                           :disabled="!disableList[1]"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="将仓储物流 作为定价参数">
                        <Row>
                            <Col span="2">
                                <Checkbox v-model="disableList[2]"></Checkbox>
                            </Col>
                            <Col span="10">
                                <FormItem prop="cangchu">
                                    <Input v-model="formValidate.cangchu" placeholder=""
                                           :disabled="!disableList[2]"></Input>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">理由：</Col>
                            <Col span="10">
                                <FormItem>
                                    <Input v-model="formValidate.cangchuRemark" placeholder="理由内容"
                                           :disabled="!disableList[2]"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="将增值服务 作为定价参数">
                        <Row>
                            <Col span="2">
                                <Checkbox v-model="disableList[3]"></Checkbox>
                            </Col>
                            <Col span="10">
                                <FormItem prop="zengzhi">
                                    <Input v-model="formValidate.zengzhi" placeholder=""
                                           :disabled="!disableList[3]"></Input>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">理由：</Col>
                            <Col span="10">
                                <FormItem>
                                    <Input v-model="formValidate.zengzhiRemark" placeholder="理由内容"
                                           :disabled="!disableList[3]"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="将汇率 作为定价参数">
                        <Row>
                            <Col span="2">
                                <Checkbox v-model="disableList[4]"></Checkbox>
                            </Col>
                            <Col span="10">
                                <FormItem prop="huilv">
                                    <Input v-model="formValidate.huilv" placeholder=""
                                           :disabled="!disableList[4]"></Input>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">理由：</Col>
                            <Col span="10">
                                <FormItem>
                                    <Input v-model="formValidate.huilvRemark" placeholder="理由内容"
                                           :disabled="!disableList[4]"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="将平台费用 作为定价参数">
                        <Row>
                            <Col span="2">
                                <Checkbox v-model="disableList[5]"></Checkbox>
                            </Col>
                            <Col span="10">
                                <FormItem prop="pingtai">
                                    <Input v-model="formValidate.pingtai" placeholder=""
                                           :disabled="!disableList[5]"></Input>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">理由：</Col>
                            <Col span="10">
                                <FormItem>
                                    <Input v-model="formValidate.pingtaiRemark" placeholder="理由内容"
                                           :disabled="!disableList[5]"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="将数据收集 作为定价参数">
                        <Row>
                            <Col span="2">
                                <Checkbox v-model="disableList[6]"></Checkbox>
                            </Col>
                            <Col span="10">
                                <FormItem prop="shuju">
                                    <Input v-model="formValidate.shuju" placeholder=""
                                           :disabled="!disableList[6]"></Input>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">理由：</Col>
                            <Col span="10">
                                <FormItem>
                                    <Input v-model="formValidate.shujuRemark" placeholder="理由内容"
                                           :disabled="!disableList[6]"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="将竞争对手 作为定价参数">
                        <Row>
                            <Col span="2">
                                <Checkbox v-model="disableList[0]"></Checkbox>
                            </Col>
                            <Col span="10">
                                <FormItem prop="jingzheng">
                                    <Input v-model="formValidate.jingzheng" placeholder=""
                                           :disabled="!disableList[0]"></Input>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">理由：</Col>
                            <Col span="10">
                                <FormItem>
                                    <Input v-model="formValidate.jingzhengRemark" placeholder="理由内容"
                                           :disabled="!disableList[0]"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>

                    <FormItem>
                        计算后的结果：{{ sum }}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="getSumPrice('formValidate')" :loading="loading1">获取定价</Button>
                        <Button type="primary" :disabled="button" to="/school/win-readme" style="margin-left: 10px">
                            下一步
                        </Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
import { saveStudentConten } from '@/api/school'
import video from '@/assets/video/2.mp4'
import { mapActions } from 'vuex'

export default {
  data () {
    const checkNum = (rule, value, callback) => {
      if (!this.$common.xeUtils.isFloat(value) && !this.$common.xeUtils.isInteger(value)) {
        return callback(new Error('请输入正确数值'))
      } else {
        if (value !== 0) {
          let ArrMen = value.split('.')
          if (ArrMen.length === 2) {
            if (ArrMen[1].length > 2) { // 判断小数点后面的字符串长度
              return callback(new Error('小数点后最多为两位'))
            }
          }
        }
      }
      return callback()
    }
    return {
      loading1: false,
      systemShow: false,
      button: true,
      animal: '',
      sum: 0,
      video: video,
      disableList: [false, false, false, false, false, false, false],
      formValidate: {
        name: 0,
        huopin: 0,
        huopinRemark: '',
        cangchu: 0,
        cangchuRemark: '',
        zengzhi: 0,
        zengzhiRemark: '',
        huilv: 0,
        huilvRemark: '',
        pingtai: 0,
        pingtaiRemark: '',
        shuju: 0,
        shujuRemark: '',
        jingzheng: 0,
        jingzhengRemark: ''
      },
      ruleValidate: {
        name: { validator: checkNum, trigger: 'blur' },
        huopin: { validator: checkNum, trigger: 'blur' },
        cangchu: { validator: checkNum, trigger: 'blur' },
        zengzhi: { validator: checkNum, trigger: 'blur' },
        huilv: { validator: checkNum, trigger: 'blur' },
        pingtai: { validator: checkNum, trigger: 'blur' },
        shuju: { validator: checkNum, trigger: 'blur' },
        jingzheng: { validator: checkNum, trigger: 'blur' }

      }
    }
  },
  methods: {
    ...mapActions([
      'setHelpId'
    ]),
    inSystem () {
      this.systemShow = false
    },
    getSumPrice (name) {
      this.loading1 = true
      this.$refs[name].validate((valid) => {
        if (valid) {
          let sum = parseFloat(this.formValidate.huopin) + parseFloat(this.formValidate.cangchu) + parseFloat(this.formValidate.zengzhi) + parseFloat(this.formValidate.huilv) + parseFloat(this.formValidate.pingtai) + parseFloat(this.formValidate.shuju) + parseFloat(this.formValidate.jingzheng) + parseFloat(this.formValidate.name)
          this.sum = sum
          let saveData = [
            { name: '初始化数值', number: this.formValidate.name },
            { name: '将货品种类作为定价参数', value: this.formValidate.huopinRemark, number: this.formValidate.huopin },
            { name: '将仓储物流 作为定价参数', value: this.formValidate.cangchuRemark, number: this.formValidate.cangchu },
            { name: '将增值服务 作为定价参数', value: this.formValidate.zengzhiRemark, number: this.formValidate.zengzhi },
            { name: '将汇率 作为定价参数', value: this.formValidate.huilvRemark, number: this.formValidate.huilv },
            { name: '将平台费用 作为定价参数', value: this.formValidate.pingtaiRemark, number: this.formValidate.pingtai },
            { name: '将数据收集 作为定价参数', value: this.formValidate.shujuRemark, number: this.formValidate.shuju },
            { name: '将竞争对手 作为定价参数', value: this.formValidate.jingzhengRemark, number: this.formValidate.jingzheng }
          ]
          let data = { type: '3', content: JSON.stringify(saveData) }
          saveStudentConten(data).then(ret => {
            if (ret.data.errcode === 1001) {
              this.loading1 = false
              this.button = false
            } else {
              this.$Message.error({
                content: '保存失败,\n' + ret.data.errmsg
              })
            }
          })
        } else {
          this.$Message.error('检查表单项!')
        }
      })
    }
  },
  mounted () {
    this.setHelpId(3)
  },
  watch: {
    animal (data) {
      // this.disableList = this.$common.xeUtils.shuffle(this.disableList)
    }
  }
}
</script>

<style scoped lang="less">
    .cost-page {
        .content {
            width: 800px;

            &-top {
                margin-left: 40%;
            }

            &-form {
                margin-top: 20px;
            }
        }
    }

    .video-page {
        &-row {
            flex-direction: column;
        }
    }

    .video-top {
        .video {
            height: 400px;
        }
    }
</style>
